@extends('admin.default')
@section('title', '添加题目')
@section('content')
    <link rel="stylesheet" href="/static/js/dtree/dtree.css">
    <link rel="stylesheet" href="/static/js/dtree/font/dtreefont.css">
        <div class="layui-fluid" >
            <div class="layui-row" style="background-color: #FFFFFF;padding: 20px">
                <form class="layui-form" id="#add_from">
                    <div class="layui-card-body text-danger"><span class="layui-badge layui-badge-green">
                            注意：添加题目必须要满足三个条件:1、 有顶级科目分类，如“一级建造师” 2 、在该科目下有具体科目名 如：“市政工程” 3、该具体科目下有章节
                        </span></div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red">*</span>选择科目：</label>
                        <div class="subject" id="subject"></div>


                    </div>
                    <input type="text" hidden="hidden" name="points" value="1">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red">*</span>选择题型：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="type" lay-filter="type" value="1" title="单选题" checked>
                            <input type="radio" name="type" lay-filter="type" value="2" title="多选题" >
                            <input type="radio" name="type" lay-filter="type" value="3" title="判断题" >
                        </div>
                    </div>
                    <div class="layui-form-item question-max-width">
                        <label  class="layui-form-label"><span class="x-red">*</span>问题标题：</label>
                        <div class="layui-input-block">
                            <textarea id="question" name="question" style="display: none;"></textarea>

                        </div>
                    </div>
                    <div class="layui-form-item question-max-width" id="selectdiv">
                        <label  class="layui-form-label">
                            <span class="x-red">*</span>问题选项：</label>
                        <div class="layui-input-block question-max-width">
                            <ol id="select">
                                <li><div class="qa-xx-item">
                                       <input type="text" name="select[0]" placeholder="请输入选项内容" class="layui-input question-height" value="">
                                        </div></li>
                                <li><div class="qa-xx-item">
                                <input type="text" name="select[1]" placeholder="请输入选项内容" class="layui-input question-height" value="">
                                        </div></li>
                                <li><div class="qa-xx-item">
                                <input type="text" name="select[2]" placeholder="请输入选项内容" class="layui-input question-height" value="">
                                        </div></li>
                                <li><div class="qa-xx-item">
                                <input type="text" name="select[3]" placeholder="请输入选项内容" class="layui-input question-height">
                                    </div></li>
                            </ol>
                            <div class="qa-xx-item">
                                <button type="button" class="layui-btn" onclick="addselect()">增加选项</button>
                            </div>
                        </div></div>
                        <div class="layui-form-item" id="one">
                            <label class="layui-form-label"><span class="x-red">*</span>正确答案：</label>
                            <div class="layui-input-block">
                                <input type="radio" name="answer" lay-filter='one' value="A" title="A">
                                <input type="radio" name="answer" lay-filter='one' value="B" title="B" >
                                <input type="radio" name="answer" lay-filter='one' value="C" title="C" >
                                <input type="radio" name="answer" lay-filter='one' value="D" title="D" >
                                <input type="radio" name="answer" lay-filter='one' value="E" title="E" >
                                <input type="radio" name="answer" lay-filter='one' value="F" title="F" >
                                <input type="radio" name="answer" lay-filter='one' value="G" title="G" >
                                <input type="radio" name="answer" lay-filter='one' value="H" title="H" >
                            </div>
                        </div>
                        <div class="layui-form-item" id="two">
                            <label class="layui-form-label"><span class="x-red">*</span>正确答案：</label>
                            <div class="layui-input-block">
                                <input type="checkbox" lay-filter='two' name="answer[]" value="A" title="A">
                                <input type="checkbox" lay-filter='two' name="answer[]" value="B" title="B" >
                                <input type="checkbox" lay-filter='two' name="answer[]" value="C" title="C" >
                                <input type="checkbox" lay-filter='two' name="answer[]" value="D" title="D" >
                                <input type="checkbox" lay-filter='two' name="answer[]" value="E" title="E" >
                                <input type="checkbox" lay-filter='two' name="answer[]" value="F" title="F" >
                                <input type="checkbox" lay-filter='two' name="answer[]" value="G" title="G" >
                                <input type="checkbox" lay-filter='two' name="answer[]" value="H" title="H" >
                            </div>
                        </div>
                        <div class="layui-form-item" id="three">
                            <label class="layui-form-label"><span class="x-red">*</span>正确答案：</label>
                            <div class="layui-input-block">
                                <input type="radio" name="answer" lay-filter='three' value="1" title="正确" >
                                <input type="radio" name="answer" lay-filter='three' value="2" title="错误" >
                            </div>
                        </div>

                        <div class="layui-form-item question-max-width">
                            <label for="desc" class="layui-form-label">答案解析：</label>
                            <div class="layui-input-block">
                                <textarea id="intro" name="intro" style="display: none;"></textarea>

                            </div>
                        </div>
                        <div class="layui-form-item question-max-width">
                            <label  class="layui-form-label">问题状态：</label>
                            <div class="layui-input-block padd-top5">
                                <input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF" value="2" checked>

                                    <span class="x-red">*</span>用于是否在前台展示该问题

                            </div>
                        </div>
                        <input type="text" hidden="hidden" name="author" value="{{Auth::guard('admin')->user()->id}}">
                        {{csrf_field()}}

        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label"></label>
            <button class="layui-btn" lay-filter="add" lay-submit="">增加</button></div>
        </form>
        </div>
        </div>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script>  layui.extend({
                inte: '{/}/static/js/inte',
                //interact: '{/}/static/js/interact'
            }).use(['form', 'layer','layedit','inte'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit;
                var inte = layui.inte;
                var questions=layedit.build('question',{height: 100,tool: ['strong','italic','underline' ,'del' ,'|' ,'left' ,'center' ,'right' ,'link' ,'unlink' ,'face']});
                var intros=layedit.build('intro',{height: 150,tool: ['strong','italic','underline' ,'del' ,'|' ,'left' ,'center' ,'right' ,'link' ,'unlink' ,'face']});
                $("#two,#three").hide();
                form.on('radio(type)', function(data){
                    var _val = data.value;
                    if(_val ==2){
                        $('input[name=answer]').prop('checked', false);
                        form.render('radio');
                        $("#one,#three").hide();
                        $("#two,#selectdiv").show();
                    }
                    else if(_val ==3){
                        $(':checkbox[lay-filter="two"]').prop('checked', false);
                        form.render('checkbox');
                        $(':radio[lay-filter="one"]').prop('checked', false);
                        form.render('radio');
                        $("#one,#two,#selectdiv").hide();
                        $("#three").show();
                        $("#select :input").val('');
                    }
                    else{
                        $(':checkbox[lay-filter="two"]').prop('checked', false);
                        form.render('checkbox');
                        /*$('input[name=answer]').prop('checked', false);*/
                        $(':radio[lay-filter="three"]').prop('checked', false);
                        form.render('radio');
                        $("#two,#three").hide();
                        $("#one,#selectdiv").show();

                    }
                });
                form.on('submit(add)',
                function(data) {
                    var question = layedit.getContent(questions);
                    var intro = layedit.getContent(intros);
                    data = data.field;
                    data.question=question;
                    data.intro=intro;
                    $.ajax({
                        type: 'POST',
                        url: '{{route('admin.question.store')}}',
                        data: data,
                        dataType: 'json',
                        success: function (data){
                            if(data == 1){
                                layer.alert('添加成功', {
                                    icon: 1,
                                    skin: 'layui-layer-molv' //样式类名
                                    ,closeBtn: 0
                                }, function(){
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    parent.location.reload();
                                });
                            } else{
                                layer.alert('添加失敗', {
                                    icon: 2,
                                    skin: 'layui-layer-molv' //样式类名
                                    ,closeBtn: 0
                                });
                            }
                        },
                        error: function(res){
                            var msg=JSON.parse(res.responseText);
                            layer.alert(msg.message, {
                                icon: 2,
                                title: '提示信息',
                                skin: 'layui-layer-molv' //样式类名
                                ,closeBtn: 0
                            });
                        }
                    });
                    return false;
                });
                var options = {
                    elem :'#subject',
                    url: '{{route('api.subjects.list')}}',
                    s_url: '{{route('api.sections.list')}}',
                    ic: 'layui-input-inline', // layui自带样式类，如果需要扩展样式可以设置类进行样式定义
                    zc: 'inte-item', // 插件里面用的一个类标识，如果和你页面上标签有冲突，可以更改此参数
                    primary_key: 'id', // 主键字段
                    parent_key: 'parent_id', // 父级字段
                    title_key: 'name', // 标题字段
                    top_value: 0,
                    selected: [], //默认选中值，例如[1,4,11]
                    hint: ['请选择顶级科目','请选具体科目分类','请选择章节'], // 提示，例如['请选择省','请选择市','请选择区']
                    name: ['top_subject','subject','sections'], // select的name值，例如['province','city','area']
                    dname: 'int', // 如果name未设置，默认select的name值为int[]
                    dhint: '请添加具体科目分类', // 如果hint未设置，默认每个select第一个option是请选择
                    is_step: false, // 是否逐步获取子级
                    count: 0, // 总共显示层级，0表示不限制
                };
                inte.render(options);
            });

            var nextNum = 4;
            var nextCode = 69;
        function addselect() {
            var addhtml = '<li><div class="qa-xx-item">'
                +'<input type="text" name="select['+nextNum+']" placeholder="请输入选项内容" class="layui-input question-height" autocomplete="off">'
                +'<span class="qa-xx-item-title"><button type="button" class="layui-btn layui-btn-xs" onclick="removeselect(this)">删除</button></span>'
                +'</div></li>';
            if(nextCode > 72){
                layer.alert('最多可以有8个问题选项<br>选项最多到 H ', {
                    icon: 2,
                    title: '提示信息',
                    skin: 'layui-layer-molv' //样式类名
                    ,closeBtn: 0
                });
                return false;
            }
            $("#select").append(addhtml);
            nextNum++;
            nextCode++;
        }
        function removeselect(obj) {
            var liItem = $(obj).parents("li");
            liItem.remove();
            nextCode--;
        }
        </script>
@stop
